<template>
  <div class="detail-container">
    <div>
      <el-steps :active="formatStepStatus(order.status)" finish-status="success" align-center>
        <el-step title="提交订单" :description="formatTime(order.createTime)"></el-step>
        <el-step title="支付订单" :description="formatTime(order.paymentTime)"></el-step>
        <el-step title="平台发货" :description="formatTime(order.deliveryTime)"></el-step>
        <el-step title="确认收货" :description="formatTime(order.receiveTime)"></el-step>
        <el-step title="完成评价" :description="formatTime(order.commentTime)"></el-step>
      </el-steps>
    </div>
    <el-card shadow="never" style="margin-top: 15px">
      <div class="operate-container">
        <i class="el-icon-warning color-danger" style="margin-left: 20px"></i>
        <span class="color-danger">当前订单状态：{{ order.status | formatStatus }}</span>
        <div class="operate-button-container" v-show="order.status===0">
          <el-button size="mini" @click="showUpdateReceiverDialog">修改收货人信息</el-button>
          <el-button size="mini" @click="showUpdateMoneyDialog">修改费用信息</el-button>
          <el-button size="mini" @click="showCloseOrderDialog">关闭订单</el-button>
          <el-button size="mini" @click="showMarkOrderDialog">备注订单</el-button>
        </div>
        <div class="operate-button-container" v-show="order.status===1">
          <el-button size="mini" @click="showUpdateReceiverDialog">修改收货人信息</el-button>
          <el-button size="mini" @click="showDeliveryDialog">发货</el-button>
          <el-button size="mini" @click="showMarkOrderDialog">备注订单</el-button>
        </div>
        <div class="operate-button-container" v-show="order.status===2||order.status===3">
          <el-button size="mini" @click="showLogisticsDialog">订单跟踪</el-button>
          <el-button size="mini" @click="showMarkOrderDialog">备注订单</el-button>
        </div>
        <div class="operate-button-container" v-show="order.status===4">
          <el-button size="mini" @click="handleDeleteOrder">删除订单</el-button>
          <el-button size="mini" @click="showMarkOrderDialog">备注订单</el-button>
        </div>
      </div>
      <div style="margin-top: 20px">
        <el-descriptions title="基本信息">
          <el-descriptions-item label="订单号">{{ order.order_number }}</el-descriptions-item>
          <el-descriptions-item label="物流单号">{{ order.delivery_number }}</el-descriptions-item>
          <el-descriptions-item label="备注">
            <el-tag size="middle" type="success" v-if="order.remark!==''">{{ order.remark }}</el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div style="margin-top: 20px">
        <el-descriptions title="收货人信息">
          <el-descriptions-item label="收货人">{{ order.receiver_name }}</el-descriptions-item>
          <el-descriptions-item label="手机号码">{{ order.receiver_mobile }}</el-descriptions-item>
          <el-descriptions-item label="Email">{{ order.receiver_email }}</el-descriptions-item>
          <el-descriptions-item label="收货地址">{{ order | formatAddress }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div style="margin-top: 20px">
        <el-descriptions title="商品信息"></el-descriptions>
      </div>
      <el-table
        ref="orderItemTable"
        :data="order.order_item"
        style="width: 100%;margin-top: 20px" border
      >
        <el-table-column label="商品图片" width="120" align="center">
          <template slot-scope="scope">
            <img :src="scope.row.goods_icon" style="height: 80px">
          </template>
        </el-table-column>
        <el-table-column label="商品名称" align="center">
          <template slot-scope="scope">
            <p>{{ scope.row.goods_name }}</p>
          </template>
        </el-table-column>
        <el-table-column label="价格" width="120" align="center">
          <template slot-scope="scope">
            <p>价格：￥{{ scope.row.price }}</p>
          </template>
        </el-table-column>
        <el-table-column label="属性" width="120" align="center">
          <template slot-scope="scope">
            {{ scope.row.productAttr | formatProductAttr }}
          </template>
        </el-table-column>
        <el-table-column label="数量" width="120" align="center">
          <template slot-scope="scope">
            {{ scope.row.number }}
          </template>
        </el-table-column>
        <el-table-column label="小计" width="120" align="center">
          <template slot-scope="scope">
            ￥{{ scope.row.total_price }}
          </template>
        </el-table-column>
      </el-table>
      <div style="float: right;margin: 20px">
        合计：<span class="color-danger">￥{{ order.totalAmount }}</span>
      </div>
      <div style="margin-top: 20px">
        <el-descriptions title="订单操作信息"></el-descriptions>
      </div>
      <el-table style="margin-top: 20px;width: 100%"
                ref="orderHistoryTable"
                :data="orderLogsList" border
      >
        <el-table-column label="操作者" width="120" align="center">
          <template slot-scope="scope">
            {{ scope.row.create_by }}
          </template>
        </el-table-column>
        <el-table-column label="操作时间" width="160" align="center">
          <template slot-scope="scope">
            {{ formatTime(scope.row.create_time) }}
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center">
          <template slot-scope="scope">
            {{ scope.row.remark }}
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog title="修改收货人信息"
               :visible.sync="receiverDialogVisible"
               width="40%"
    >
      <el-form :model="receiverInfo"
               ref="receiverInfoForm"
               label-width="150px"
      >
        <el-form-item label="收货人姓名：">
          <el-input v-model="receiverInfo.receiverName" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="手机号码：">
          <el-input v-model="receiverInfo.receiverPhone" style="width: 200px">
          </el-input>
        </el-form-item>
        <el-form-item label="邮政编码：">
          <el-input v-model="receiverInfo.receiverPostCode" style="width: 200px">
          </el-input>
        </el-form-item>
        <el-form-item label="所在区域：">
          <v-distpicker :province="receiverInfo.receiverProvince"
                        :city="receiverInfo.receiverCity"
                        :area="receiverInfo.receiverRegion"
                        @selected="onSelectRegion"
          ></v-distpicker>
        </el-form-item>
        <el-form-item label="详细地址：">
          <el-input v-model="receiverInfo.receiverDetailAddress" type="textarea" rows="3">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="receiverDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleUpdateReceiverInfo">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="发货"
               :visible.sync="deliveryDialogVisible"
               width="40%"
    >
      <el-form :model="deliveryInfo"
               ref="deliveryInfoForm"
               label-width="150px"
      >
        <el-form-item label="快递公司：">
          <el-select placeholder="请选择物流公司"
                     v-model="deliveryInfo.delivery_company_id"
                     size="small"
          >
            <el-option v-for="item in expressSelectList"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="快递单号：">
          <el-input v-model="deliveryInfo.delivery_number" style="width: 200px">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="deliveryDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleDeliveryInfo">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="修改费用信息"
               :visible.sync="moneyDialogVisible"
               width="40%"
    >
      <div class="table-layout">
        <el-row>
          <el-col :span="6" class="table-cell-title">商品合计</el-col>
          <el-col :span="6" class="table-cell-title">运费</el-col>
          <el-col :span="6" class="table-cell-title">优惠券</el-col>
          <el-col :span="6" class="table-cell-title">积分抵扣</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell">￥{{ order.totalAmount }}</el-col>
          <el-col :span="6" class="table-cell">
            <el-input v-model.number="moneyInfo.freightAmount" size="mini">
              <template slot="prepend">￥</template>
            </el-input>
          </el-col>
          <el-col :span="6" class="table-cell">-￥{{ order.couponAmount }}</el-col>
          <el-col :span="6" class="table-cell">-￥{{ order.integrationAmount }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell-title">活动优惠</el-col>
          <el-col :span="6" class="table-cell-title">折扣金额</el-col>
          <el-col :span="6" class="table-cell-title">订单总金额</el-col>
          <el-col :span="6" class="table-cell-title">应付款金额</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell">-￥{{ order.promotionAmount }}</el-col>
          <el-col :span="6" class="table-cell">
            <el-input v-model.number="moneyInfo.discountAmount" size="mini">
              <template slot="prepend">-￥</template>
            </el-input>
          </el-col>
          <el-col :span="6" class="table-cell">
            <span class="color-danger">￥{{ order.totalAmount + moneyInfo.freightAmount }}</span>
          </el-col>
          <el-col :span="6" class="table-cell">
            <span class="color-danger"
            >￥{{ order.payAmount + moneyInfo.freightAmount - moneyInfo.discountAmount }}</span>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
      <el-button @click="moneyDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleUpdateMoneyInfo">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="关闭订单"
               :visible.sync="closeDialogVisible"
               width="40%"
    >
      <el-form :model="closeInfo"
               label-width="150px"
      >
        <el-form-item label="操作备注：">
          <el-input v-model="closeInfo.note" type="textarea" rows="3">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleCloseOrder">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="备注订单"
               :visible.sync="markOrderDialogVisible"
               width="40%"
    >
      <el-form :model="markInfo"
               label-width="150px"
      >
        <el-form-item label="操作备注：">
          <el-input v-model="markInfo.note" type="textarea" rows="3">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="markOrderDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleMarkOrder">确 定</el-button>
      </span>
    </el-dialog>
    <logistics-dialog v-model="logisticsDialogVisible"></logistics-dialog>
  </div>
</template>
<script>
import { fetchList as getOrderLogs } from '@/api/order/order_operate_log'
import { getDetail, remarkOrder, deliveryOrder } from '@/api/order/order'
import { selectList as expressSelectList } from '@/api/order/express'
import LogisticsDialog from './components/logistics_dialog'
import { parseTime } from '@/utils'

const defaultReceiverInfo = {
  id: null,
  receiver_name: null,
  email: null,
  mobile: null,
  address: null,
  province: null,
  city: null,
  region: null
}
const defaultDeliveryInfo = {
  order_id: null,
  delivery_company_id: null,
  delivery_number: null
}
export default {
  name: 'OrderDetail',
  components: { LogisticsDialog },
  data() {
    return {
      id: null,
      order: {},
      orderLogsList: null,
      receiverDialogVisible: false,
      deliveryDialogVisible: false,
      receiverInfo: Object.assign({}, defaultReceiverInfo),
      deliveryInfo: Object.assign({}, defaultDeliveryInfo),
      moneyDialogVisible: false,
      moneyInfo: { orderId: null, freightAmount: 0, discountAmount: 0, status: null },
      closeDialogVisible: false,
      closeInfo: { note: null, id: null },
      markOrderDialogVisible: false,
      markInfo: { note: null },
      logisticsDialogVisible: false,
      expressSelectList: null
    }
  },
  created() {
    this.id = this.$route.query.id
    this.getOrderInfo()
    this.getOrderLogsList()
    this.deliveryInfo.order_id = this.id
  },
  filters: {
    formatNull(value) {
      if (value === undefined || value === null || value === '') {
        return '暂无'
      } else {
        return value
      }
    },
    formatLongText(value) {
      if (value === undefined || value === null || value === '') {
        return '暂无'
      } else if (value.length > 8) {
        return value.substr(0, 8) + '...'
      } else {
        return value
      }
    },
    formatPayType(value) {
      if (value === 1) {
        return '支付宝'
      } else if (value === 2) {
        return '微信'
      } else {
        return '未支付'
      }
    },
    formatSourceType(value) {
      if (value === 1) {
        return 'APP订单'
      } else {
        return 'PC订单'
      }
    },
    formatOrderType(value) {
      if (value === 1) {
        return '秒杀订单'
      } else {
        return '正常订单'
      }
    },
    formatAddress(order) {
      let str = order.receiver_province
      if (order.receiver_city != null) {
        str += '  ' + order.receiver_city
      }
      str += '  ' + order.receiver_region
      str += '  ' + order.receiver_address
      return str
    },
    formatStatus(value) {
      if (value === 1) {
        return '待发货'
      } else if (value === 2) {
        return '已发货'
      } else if (value === 3) {
        return '已完成'
      } else if (value === 4) {
        return '已关闭'
      } else if (value === 5) {
        return '无效订单'
      } else {
        return '待付款'
      }
    },
    formatPayStatus(value) {
      if (value === 0) {
        return '未支付'
      } else if (value === 4) {
        return '已退款'
      } else {
        return '已支付'
      }
    },
    formatDeliverStatus(value) {
      if (value === 0 || value === 1) {
        return '未发货'
      } else {
        return '已发货'
      }
    },
    formatProductAttr(value) {
      if (value == null) {
        return ''
      } else {
        let attr = JSON.parse(value)
        let result = ''
        for (let i = 0; i < attr.length; i++) {
          result += attr[i].key
          result += ':'
          result += attr[i].value
          result += ';'
        }
        return result
      }
    }
  },
  methods: {
    getOrderLogsList() {
      getOrderLogs({ 'order_id': this.id }).then(response => {
        this.orderLogsList = response.data
      })
    },
    getExpressSelectList() {
      expressSelectList().then(res=>{
        this.expressSelectList = res.data
      })
    },
    getOrderInfo() {
      getDetail({ 'id': this.id }).then(response => {
        this.order = response.data
      })
    },
    onSelectRegion(data) {
      this.receiverInfo.receiverProvince = data.province.value
      this.receiverInfo.receiverCity = data.city.value
      this.receiverInfo.receiverRegion = data.area.value
    },
    formatTime(time) {
      return parseTime(time)
    },
    formatStepStatus(value) {
      if (value === 1) {
        //待发货
        return 2
      } else if (value === 2) {
        //已发货
        return 3
      } else if (value === 3) {
        //已完成
        return 4
      } else {
        //待付款、已关闭、无限订单
        return 1
      }
    },
    showUpdateReceiverDialog() {
      this.receiverDialogVisible = true
      this.receiverInfo = {
        orderId: this.order.id,
        receiverName: this.order.receiverName,
        receiverPhone: this.order.receiverPhone,
        receiverPostCode: this.order.receiverPostCode,
        receiverDetailAddress: this.order.receiverDetailAddress,
        receiverProvince: this.order.receiverProvince,
        receiverCity: this.order.receiverCity,
        receiverRegion: this.order.receiverRegion,
        status: this.order.status
      }
    },
    showDeliveryDialog() {
      this.deliveryDialogVisible = true
      this.getExpressSelectList()
      this.deliveryInfo = {
        order_id: this.order.id
      }
    },
    handleUpdateReceiverInfo() {
      this.$confirm('是否要修改收货信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateReceiverInfo(this.receiverInfo).then(response => {
          this.receiverDialogVisible = false
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
          this.getOrderDetail(this.id).then(response => {
            this.order = response.data
          })
        })
      })
    },
    handleDeliveryInfo() {
      this.$confirm('是否确定发货?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deliveryOrder(this.deliveryInfo).then(response => {
          this.deliveryDialogVisible = false
          this.$message({
            type: 'success',
            message: '发货成功!'
          })
          this.getOrderInfo()
          this.getOrderLogsList()
        })
      })
    },
    showUpdateMoneyDialog() {
      this.moneyDialogVisible = true
      this.moneyInfo.orderId = this.order.id
      this.moneyInfo.freightAmount = this.order.freightAmount
      this.moneyInfo.discountAmount = this.order.discountAmount
      this.moneyInfo.status = this.order.status
    },
    handleUpdateMoneyInfo() {
      this.$confirm('是否要修改费用信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateMoneyInfo(this.moneyInfo).then(response => {
          this.moneyDialogVisible = false
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
          getOrderDetail(this.id).then(response => {
            this.order = response.data
          })
        })
      })
    },
    showCloseOrderDialog() {
      this.closeDialogVisible = true
      this.closeInfo.note = null
      this.closeInfo.id = this.id
    },
    handleCloseOrder() {
      this.$confirm('是否要关闭?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = new URLSearchParams()
        params.append('ids', [this.closeInfo.id])
        params.append('note', this.closeInfo.note)
        closeOrder(params).then(response => {
          this.closeDialogVisible = false
          this.$message({
            type: 'success',
            message: '订单关闭成功!'
          })
          this.reloadData()
        })
      })
    },
    showMarkOrderDialog() {
      this.markOrderDialogVisible = true
      this.markInfo.id = this.id
      this.closeOrder.content = null
    },
    handleMarkOrder() {
      this.$confirm('是否要备注订单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = { 'id': Number(this.id), 'remark': this.markInfo.note }
        remarkOrder(params).then(response => {
          this.markOrderDialogVisible = false
          this.$message({
            type: 'success',
            message: '订单备注成功!'
          })
          this.reloadData()
        })
      })
    },
    handleDeleteOrder() {
      this.$confirm('是否要进行该删除操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = new URLSearchParams()
        params.append('ids', [this.id])
        deleteOrder(params).then(response => {
          this.$message({
            message: '删除成功！',
            type: 'success',
            duration: 1000
          })
          this.$router.back()
        })
      })
    },
    showLogisticsDialog() {
      this.logisticsDialogVisible = true
    },
    reloadData() {
      this.getOrderInfo()
      this.getOrderLogsList()
    }
  }
}
</script>
<style scoped>
.detail-container {
  width: 80%;
  padding: 20px 20px 20px 20px;
  margin: 20px auto;
}

.operate-container {
  background: #F2F6FC;
  height: 80px;
  margin: -20px -20px 0;
  line-height: 80px;
}

.operate-button-container {
  float: right;
  margin-right: 20px
}

.table-layout {
  margin-top: 20px;
  border-left: 1px solid #DCDFE6;
  border-top: 1px solid #DCDFE6;
}

.table-cell {
  height: 60px;
  line-height: 40px;
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
  font-size: 14px;
  color: #606266;
  text-align: center;
  overflow: hidden;
}

.table-cell-title {
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
  background: #F2F6FC;
  text-align: center;
  font-size: 14px;
  color: #303133;
}
</style>


